<template>
	<view class="qaranking_pages">
		<view class="rank_cells_box_box" :style="'top:'+cell_top+'rpx;'">
			<view class="rank_cells_box">
				<view class="rank_cells_boxd" :style="'height: calc(100vh - ' + topbothei + 'rpx);'">
					<view class="rank_cell" v-for="item in list" :key="item.province_name">
						<view style="flex: 1;display: flex;align-items: center;">
							<view class="user_sort">{{item.sort}}</view>
							<view class="ml-15">{{item.province_name}} </view>
						</view>
						<view class="rank_user_num">
							<span
								style="color: #1E2A75;font-weight: 600;font-family: PangMenZhengDao-3;margin-right: 8rpx;">{{item.number}}</span>人
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_bk_box">
			<image class="next_bkimg" :src="info.result_icon"></image>
			<view class="fix_btn_box" v-if="rinfo.button">
				<view v-if="rinfo.stage_id==1"
					style="background-image: linear-gradient(to right, rgba(41, 41, 41, 0.7), rgba(41, 41, 41, 1));"
					class="fix_btnd" @click="goQalist">{{rinfo.button.name}}</view>
				<view v-if="rinfo.stage_id==2"
					style="background-image: linear-gradient(to right, rgba(156, 156, 156, 0.7), rgba(156, 156, 156, 1));"
					class="fix_btnd" @click="goQalist">{{rinfo.button.name}}</view>
				<view v-if="rinfo.stage_id==3"
					style="background-image: linear-gradient(to right, rgba(239, 216, 139, 1), rgba(218, 190, 94, 1));"
					class="fix_btnd" @click="goQalist">{{rinfo.button.name}}</view>
				<view v-if="!rinfo.stage_id"
					style="background-image: linear-gradient(to right, rgba(5, 75, 140, 1), rgba(31, 42, 116, 1));"
					class="fix_btnd" @click="goQalist">{{rinfo.button.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getQaInfo,
		getrankList
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				subject_id: 0,
				channel: 0,
				info: '',
				rinfo: '',
				list: [],
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				cell_top: 170,
				channel: '',
				topbothei: 620,
				
			};
		},
		onShow() {
			if (uni.getStorageSync('onload')) {
				this.getQaInfo()
				this.getrankList()
				uni.removeStorage({
					key: 'onload',
				})
			}
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},
		onLoad(options) {
			this.subject_id = options.subject_id
			this.channel = options.channel
			this.cell_top = uni.getSystemInfoSync().statusBarHeight > 30 ? uni.getSystemInfoSync().statusBarHeight + 420 : 420
			this.topbothei = uni.getSystemInfoSync().statusBarHeight > 30 ? 670 : 620
			if (uni.getStorageSync('access_token')) {
				this.getQaInfo()
				this.getrankList()
			}
		},
		methods: {
			getQaInfo() {
				getQaInfo({
					channel: this.channel,
					subject_id: this.subject_id,
					
				}).then(res => {
					if (res.state == 1) {
						this.info = res.data
						var params = {
							event_code: '答题排行榜',
							event_id: '',
							title: '',
							value: '',
							path: 'pages/qa/qaranking/qaranking',
						}
						app.BurialPoint(params)
					}
				})
			},
			getrankList() {
				getrankList({
					channel: this.channel,
					subject_id: this.subject_id,
					type: 2,
					
				}).then(res => {
					if (res.state == 1) {
						this.list = res.data.info.ranking
						this.rinfo = res.data.info
					}
				})
			},
			goQalist() {
				clearTimeout(this.timeout)
				var that = this
				uni.redirectTo({
					url: that.rinfo.button.url
				})
				var params = {
					event_code: '答题排行榜-立即参与',
					event_id: that.info.id,
					title: that.info.title,
					value: '',
					path: 'pages/qa/qaranking/qaranking',
				}
				app.BurialPoint(params)
			},
			goPage() {
				if (this.info.path_type == 'switchTab') {
					uni.switchTab({
						url: this.info.path_url,
					})
				} else if (this.info.path_type == 'navigateTo') {
					uni.navigateTo({
						url: this.info.path_url,
					})
				} else if (this.info.path_type == 'reLaunch') {
					uni.reLaunch({
						url: this.info.path_url,
					})
				} else if (this.info.path_type == 'redirectTo') {
					uni.redirectTo({
						url: this.info.path_url,
					})
				}
			}
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {
				title: this.info.title ? this.info.title : '答题',
				imageUrl: this.info.share_img ? this.info.share_img : '',
				path: '/pages/qa/qaranking/qaranking?subject_id=' + this.subject_id + '&channel=' + this.channel
			}
		}
	}
</script>

<style lang="scss">
	.qaranking_pages {
		.rank_top_box_box {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			height: 450rpx;
			z-index: 6;
		}

		.rank_top_box {
			height: 300rpx;
			color: #ffffff;
			background-size: cover;
			background-color: #ffffff;
		}

		.rank_title_img_box {
			display: flex;
			justify-content: center;
			margin-top: 40rpx;

		}

		.rank_title_img {
			width: 560rpx;
			height: 260rpx;
			box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 3px;
		}

		.rank_cells_box_box {
			display: flex;
			justify-content: center;
			position: fixed;
			left: 0;
			right: 0;
			/* top: 32%; */
			z-index: 5;
			bottom: 200rpx;
		}

		.rank_cells_box {
			width: 560rpx;
			font-size: 24rpx;
			background-color: #ffffff;
			/* padding-bottom: 240rpx; */
			padding-bottom: 30rpx;
		}

		.rank_cells_boxd {
			padding: 0 60rpx;
			overflow-y: auto;
		}

		.user_sort {
			margin-left: 20rpx;
		}

		.rank_cell_box_title {
			color: #B8955D;
			font-size: 52rpx;
			letter-spacing: 1px;
			text-align: center;
			padding: 30rpx 20rpx;
			font-family: PangMenZhengDao-3;
		}

		.rank_cell {
			display: flex;
			align-items: center;
			margin: 10rpx 0;
			margin-top: 35rpx;
			padding: 6rpx 15rpx;
			background-color: #d3d8e0;
		}

		.rank_user_num {
			width: 140rpx;
			text-align: center;
			/* padding: 0 30rpx 0 40rpx; */
			border-left: 2rpx solid #1E2A75;
		}

		.bottom_bk_box {
			height: 520rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-image: linear-gradient(to bottom, #ffffff, rgba(236, 236, 236, 1));
		}

		.next_bkimg {
			width: 390rpx;
			height: 190rpx;
			position: absolute;
			right: 40rpx;
			bottom: 0;
		}

		.fix_btn_box {
			position: absolute;
			left: 0;
			right: 0;
			top: 72%;
			margin: 0 auto;
			display: flex;
			justify-content: center;
		}

		.fix_btnd {
			min-width: 300rpx;
			color: #FFFFFF;
			font-size: 26rpx;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 100rpx;
			border-bottom: 5rpx solid #fff;
		}
	}
</style>
